<template>


  <div>
    <!--搜索框-->
    <div class="search-box">
      <el-form :inline="true" :model="teacherQuery" class="demo-form-inline" size="small">

        <el-form-item label="名字">
          <el-input v-model="teacherQuery.name" placeholder="名字"></el-input>
        </el-form-item>

        <el-form-item label="头衔">
          <el-select v-model="teacherQuery.level" placeholder="头衔">
            <el-option label="全部" value="NULL"></el-option>
            <el-option label="高级讲师" :value="1"></el-option>
            <el-option label="首席讲师" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="teacherQuery.startTime"
            type="date"
            placeholder="开始时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="teacherQuery.endTime"
            type="date"
            placeholder="结束时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList()">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="reLoad">清空</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="add">添加讲师</el-button>
        </el-form-item>

      </el-form>

    </div>
    <!--数据页-->
    <div class="data-box">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >

        <el-table-column
          prop="sort"
          label="排序号"
          width="80">
        </el-table-column>

        <el-table-column
          prop="name"
          label="姓名"
          width="100">
        </el-table-column>

        <el-table-column
          label="头像"
          width="120">
          <template slot-scope="scope"><img :src="scope.row.avatar" alt="" class="img-box"
                                            @click="showAvatar(scope.row.avatar)"></template>
        </el-table-column>

        <el-table-column
          label="头衔"
          width="180">
          <template slot-scope="scope">
            {{scope.row.level === 1 ? '高级讲师' : '首席讲师'}}
          </template>
        </el-table-column>

        <el-table-column
          label="资历"
          width="180">
          <template slot-scope="scope">
            <div class="left">
              <el-tooltip class="item" effect="dark" :content="scope.row.career" placement="top">
                <div class="intro">
                  {{scope.row.career}}
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="gmtCreate"
          label="创建时间"
          width="180">
        </el-table-column>

        <el-table-column
          label="简介"
          width="220">
          <template slot-scope="scope">
            <div class="left">
              <el-tooltip class="item" effect="dark" :content="scope.row.intro" placement="top">
                <div class="intro">
                  {{scope.row.intro}}
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary" size="mini" @click="show(scope.row.id)">修改</el-button>
              <el-button type="danger" size="mini" @click="deleteTeacher(scope.row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--分页条-->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper, ->"
        :page-size="pageSize"
        :total="total"
        :current-page="pageNum"
        @current-change="getList">
      </el-pagination>
    </div>

    <el-dialog title="讲师信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="teacher">

        <el-form-item label="讲师头像" :label-width="formLabelWidth">
          <div class="avatar-box">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8002/eduoss/fileoss"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="teacher.avatar" :src="teacher.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>

        </el-form-item>

        <el-form-item label="排序号" :label-width="formLabelWidth"
                      prop="sort"
                      :rules="[
                                  { required: true, message: '排序号不能为空'},
                                  { type: 'number', message: '排序号必须为数字值'}
                                ]"
        >
          <el-input v-model.number="teacher.sort" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="讲师名称" :label-width="formLabelWidth">
          <el-input v-model="teacher.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="讲师头衔" :label-width="formLabelWidth">
          <el-select v-model="teacher.level" placeholder="请选择讲师头衔">
            <el-option label="高级讲师" :value="1"></el-option>
            <el-option label="首席讲师" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="讲师资历" :label-width="formLabelWidth">
          <el-input v-model="teacher.career" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="讲师简介" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="讲师简介"
            v-model="teacher.intro">
          </el-input>
        </el-form-item>

        <el-form-item label="入职时间" :label-width="formLabelWidth">
          <el-input v-model="teacher.gmtCreate" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTeacher">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="讲师头像" :visible.sync="dialogAvatarVisible" :close-on-click-modal="false">
      <div class="teacher-avatar-box">
        <img :src="avatar" class="teacher-avatar">
      </div>
    </el-dialog>

  </div>
</template>

<style>
  .intro {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .avatar-box {
    display: flex;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    width: 100px;
    height: 100px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .pagination {
    float: right;
    margin-right: 5px;
  }

  .data-box {
    margin: 0 15px 15px 15px;
    border: #f4f4f5 1px solid;
  }

  .search-box {
    border: #f4f4f5 1px solid;
    margin: 15px 15px 5px 15px;
    padding: 10px 0 0 5px;
  }

  .avatar {
    border-radius: 6px;
    width: 100px;
    height: 100px;
  }

  .img-box {
    width: 50px;
    height: 50px;
  }

  .teacher-avatar-box {
    width: 500px;
    height: 500px;
    margin: auto;
  }

  .teacher-avatar {
    width: 500px;
    height: 500px;
  }
</style>

<script>
  import teacher from "@/api/edu/teacher";

  export default {
    data() {
      return {
        tableData: [],
        pageSize: 7,
        pageNum: 1,
        teacherQuery: {
          startTime: '',
          endTime: ''
        },
        total: 0,
        restaurants: [],
        state: '',
        dialogFormVisible: false,
        teacher: {
          id: '',
          name: '',
          intro: '',
          career: '',
          level: '',
          avatar: '',
          sort: '',
          gmt_create: '',
        },
        formLabelWidth: '120px',

        imageUrl: '',

        dialogAvatarVisible: false,
        avatar: ''

      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 01 分页查询
      getList(page = 1) {
        this.pageNum = page
        if (this.teacherQuery.startTime) {
          this.teacherQuery.startTime = this.teacherQuery.startTime + " 00:00:00"
        }
        if (this.teacherQuery.endTime) {
          this.teacherQuery.endTime = this.teacherQuery.endTime + " 23:59:59"
        }
        teacher
          .getTeacherList(this.pageNum, this.pageSize, this.teacherQuery)
          .then(response => {
            this.tableData = response.data.rows
            this.total = response.data.total
          })
          .catch(error => console.log(error));
      },
      // 02 ID删除
      deleteTeacher(id) {
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teacher.deleteTeacher(id)
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 03 ID查看
      show(id) {
        teacher.showTeacher(id)
          .then(response => {
            this.teacher = response.data.teacher
            this.dialogFormVisible = true
          })

      },
      // 04 保存数据
      saveTeacher() {
        if (this.teacher.id) {
          teacher.updateTeacher(this.teacher)
            .then(response => {
              this.dialogFormVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: '保存成功!',
              });
            })
        } else {
          teacher.addTeacher(this.teacher)
            .then(response => {
              this.dialogFormVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: '保存成功!',
              });
            })
        }
      },
      // 05 添加讲师
      add() {
        this.teacher = {
          id: '',
          name: '',
          intro: '',
          career: '',
          level: '',
          avatar: '',
          sort: '',
          gmt_create: '',
        }
        teacher.getNextSort().then(response => {
          this.teacher.sort = response.data.sort
          this.dialogFormVisible = true
        })
      },
      // 06 清空条件查询
      reLoad() {
        this.teacherQuery = {}
        this.getList()
      },
      // 07 上传头像
      handleAvatarSuccess(res, file) {
        this.teacher.avatar = res.data.url
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // 08 查看头像详情
      showAvatar(url) {
        this.avatar = url
        this.dialogAvatarVisible = true;
      }

    },
    mounted() {
    }
  };
</script>
